<!-- 视频列表 -->
<template>
	<Layout id="layout">
		
			<div style="padding-left: 5px; padding-right: 5px; ">
				<!-- 头部功能区域 -->
				<div>
					<div>
						<div style="height: 40px; background-color: #eeeeee;">
							<Row type="flex" justify="start" class="code-row-bg" style="float: left; padding-left: 5px;padding-right: 5px;">
								<div style="height: 40px; line-height: 40px; margin-left: 10px;">
									<a style="color: #3f3f3f;" @click="houtui">
										<Icon type="ios-arrow-back" size="20" />
									</a> <!-- 返回上一层 -->
									<a style="margin-left: 5px;">
										<Icon type="md-refresh" color="#3f3f3f" size="20" />
									</a>
								</div>
								<a style="height: 40px; line-height: 40px; margin-left: 20px; color: #3f3f3f;">
									<Breadcrumb>
										<BreadcrumbItem v-for="item in Baidu_path">{{item}}</BreadcrumbItem>
									</Breadcrumb>
								</a>
							</Row>
							<div style="height: 40px;">
								<i-switch size="small" v-model="switch1" @on-change="change" style="margin-top: 12px;float: right;margin-right: 10px;" />
								<Input v-model="cscd" suffix="ios-search" size="small" placeholder="搜索" style="margin-top: 7px; width: auto; float: right; margin-right: 10px;"
								 @on-change="sousuo" />
							</div>
						</div>

					</div>
				</div>

				<!-- 内容区域 -->
				<div>
					<ul v-for="item in list" id="video_li">
						<li>
							<img :src="item.thumbs.url1" width="140px" height="120px" />
							<p>{{item.server_filename}}</p>
						</li>
					</ul>
					<!-- <Table :columns="columns1" :data="list"></Table> -->
				</div>
			</div>
	</Layout>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				columns1: [{
					title: 'Name',
					key: 'server_filename'
				}],
				list: [],
				Baidu_path: [],
				cscd: "",
				user: [],
				switch1: false,
				button: false
			}
		},
		mounted() {
			var access_token = window.sessionStorage.getItem('access_token')
			axios({
				url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=videolist&web=web&num=50&access_token=' + access_token,
				method: 'get'
			}).then((res) => {
				console.log(res.data)
				this.list = res.data.info
			})
		},
		methods: {
			//缩略图
			change(status) {
				this.$Message.info('开关状态：' + status);
			},

			//上传
			sc() {
				var iframe2 = document.getElementById('iframe2')
				var box = iframe2.contentWindow.document.body.getElementsByClassName("h5-uploader-form")[0][0].click();
				var tc = iframe2.contentWindow.document.body.getElementsByClassName("container");
			},

			// 返回上一层
			houtui() {
				const Baidu_path = window.sessionStorage.getItem('Baidu_path')
				const path = Baidu_path.substring(0, Baidu_path.lastIndexOf('/'))
				window.sessionStorage.setItem('Baidu_path', path)
			},

			//搜索
			sousuo() {
				if (this.cscd != "") {
					const name = this.cscd
					const access_token = window.sessionStorage.getItem('access_token')
					axios({
						url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=search&access_token=' + access_token + '&key=' + name,
						method: 'get',
					}).then((res) => {
						console.log(res.data.list)
						this.souso = res.data.list
					})
				} else {
					alert('123')
				}
			},

			//新建文件夹
			open() {
				this.$prompt('请输入文件夹名称', '新建文件夹', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputErrorMessage: '文件夹名称格式不正确'
				}).then(({
					value
				}) => {
					var access_token = window.sessionStorage.getItem('access_token')
					var path = window.sessionStorage.getItem('Baidu_path')
					if (path == "/") {
						path = "";
					}
					path = path + '/' + value;
					axios({
						url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=create&access_token=' + access_token,
						method: 'post',
						data: qs.stringify({
							"path": path,
							"isdir": 1
						}),
					}).then((res) => {
						//刷新表格数据
						axios({
							url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=list&access_token=' + access_token +
								'&dir=/' + path + '&start=0&limit=300&web=web',
							method: 'get',
						}).then((respanse) => {
							self.arr = respanse.data.list
						})

					})

					this.$message({
						type: 'success',
						showClose: true,
						message: '新建文件夹成功',
					});
				}).catch(() => {
					this.$message({
						type: 'warning',
						showClose: true,
						message: '取消创建文件夹！'
					});
				});
			},

			//获取用户信息
			getUserList() {
				this.$Spin.show();
				setTimeout(() => {
					this.$Spin.hide();
				}, 1000)
				var access_token = window.sessionStorage.getItem('access_token')
				window.sessionStorage.setItem('Baidu_path', '/')

				var self = this
				const path = window.sessionStorage.getItem('Baidu_path')
				axios({
					url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=list&access_token=' + access_token +
						'&dir=/' + path + '&start=0&limit=300&web=web',
					method: 'get',
				}).then((respanse) => {
					console.log(respanse)
					self.arr = respanse.data.list
				})

				var str = window.sessionStorage.getItem('Baidu_path')
				var a = str.split('/'); // [ab, c, de]
				this.Baidu_path = a

				//获取用户基本信息
				axios({
					url: 'https://pan.baidu.com/rest/2.0/xpan/nas?method=uinfo&access_token=' + access_token,
					method: 'get',
					data: {

					},
					headers: {

					}
				}).then((respanse) => {
					self.user = respanse.data
				})
				//获取磁盘信息
				axios({
					url: 'https://pan.baidu.com/api/quota?access_token=' + access_token,
					method: 'get',
				}).then((respanse) => {
					console.log()
					self.cipandaxiao = parseFloat(((respanse.data.used / respanse.data.total) * 100).toFixed(2))
				})
			},

			//删除
			Delete() {
				this.$Modal.confirm({
					title: 'Title',
					content: '<p>Content of dialog</p><p>Content of dialog</p>',
					onOk: () => {
						console.log(this.Selection)
						var Selection = this.Selection
						for (var i = 0; i < Selection.length; i++) {
							var access_token = window.localStorage.getItem('access_token')
							axios({
								url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=filemanager&access_token=' + access_token +
									'&opera=delete',
								method: 'post',
								// data: {
								// 	async: '1',
								// },
								data: qs.stringify({
									async: '1',
									filelist: '["' + Selection[i].path + '"]'
								}),
							}).then((res) => {
								console.log(res)
								this.Refresh()
							})

						}
						this.$Message.info('Clicked ok');
					},
					onCancel: () => {
						this.$Message.info('Clicked cancel');
					}
				});
			},

			//批量复制粘贴文件
			copy() {
				var access_token = window.localStorage.getItem('access_token')

				for (var i = 0; i < this.Selection.length; i++) {
					console.log(this.Selection[i].path)
					axios({
						url: 'https://pan.baidu.com/rest/2.0/xpan/file?method=filemanager&access_token=' + access_token + '&opera=copy',
						method: 'post',
						data: qs.stringify({
							async: '2',
							filelist: '[{"path":"' + this.Selection[i].path + '","dest":"/123","newname":"' + this.Selection[i].server_filename +
								'","ondup":"overwrite"}]'
						}),
					}).then((res) => {
						console.log(res.data)
					})
				}
			},
		}
	}
</script>

<style>
	#video_li {
		float: left;
		text-align: center;
		list-style: none;
		width: 140px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		transition: .5s;
		margin: 15px
	}

	#video_li:hover {
		background-color: #e5f3ff;
		transform: translateY(-5px);
	}
</style>
